/*样式重置*/
* {
    /*去掉默认边距*/
    margin: 0;
    padding: 0;
    /*内减模式*/
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /*去掉移动端点击高亮效果*/
    -webkit-tap-highlight-color: transparent;
} 
body {
    font-size: 14px;
    font-family: 'Microsoft Yahei','Courier New', Courier, monospace;
    color: #333;
}
ul,ol {
    list-style: none;
}
a,
a:hover {
    text-decoration: none;
    color: #333;
}
input {
    /*边框*/
    border: none;
    /*轮廓线*/
    outline: none;
    /*去除表单在移动 阴影 3D效果*/
    -webkit-appearance: none;
}

/*公共样式*/
.fl {
    float: left;
}
.fr {
    float: right;
}

/*清除浮动*/
.clearfix::before,
.clearfix::after {
    content: "";
    display: block;
    clear: both;
    line-height: 0;
    height: 0;
    visibility: hidden;
}
.jd-sprite {
    background: url('../images/jd-sprites.png') no-repeat;
    background-size: 200px;
}

/*公共布局*/

body {
    background-color: #ccc;
}
.layout {
    max-width: 640px;
    min-width: 320px;
    height: 1800px;
    background-color: #fff;
    margin: 0 auto;
}

/*公共头部*/
.header {
    top: 0;
    left: 0;
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    height: 44px;
    background-image: -webkit-linear-gradient(#eee, #bbb);
    padding: 0 44px;
    .back,
    .menu {
        position: absolute;
        top: 0;
        width: 41px;
        height: 44px;
        padding: 11px;
        /*背景原点*/
        background-origin: content-box;
        /*背景裁剪*/
        background-clip: content-box;
    }
    .back {
        left: 0;
        background-position: -24px 0;
    }
    .menu {
        right: 0;
        background-position: -60px 0;
    }
}